<template>
  <el-card class="box-card" shadow="never" style="border: none">
    <div slot="header" class="base-card-header">
      <span style="color: #0e8b8d; font-weight: bold" class="header-title">{{
        title
      }}</span>
    </div>
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="
        width: 100%;
        line-height: 1;
        margin-bottom: 10px;
        padding: 10px 0px 0px 0px;
      "
    >
      <el-input
        prefix-icon="el-icon-search"
        v-model="filterText"
        placeholder="请输入搜索内容"
        :size="defaultFormItemSize"
        clearable
      ></el-input>
    </el-row>
    <el-scrollbar class="scrollbar">
      <el-tree
        ref="moduleTree"
        :data="getModuleTreeData"
        :props="treeProps"
        :node-key="nodeKey"
        @node-click="onModuleNodeClick"
        :default-expanded-keys="expandedModule"
        :highlight-current="true"
        @node-expand="onModuleNodeExpand"
        @node-collapse="onModuleNodeCollapse"
        :default-expand-all="isExpand"
        :filter-node-method="filterNode"
      >
        <div class="module-node-item" slot-scope="{ data }">
          <div class="module-node-text">
            <!-- <div class="text">{{ data[nodeName] }}</div> -->
            <text-over-hidden-tooltip class="text" :text="data[nodeName]" />
          </div>
        </div>
      </el-tree>
    </el-scrollbar>
  </el-card>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "BaseTree",
  props: {
    getModuleTreeData: {
      type: Array,
      default: () => {},
    },
    expandedModule: {
      type: Array,
      default: () => {},
    },
    title: {
      type: String,
      default: () => {},
    },
    treeProps: {
      type: Object,
      default: () => {},
    },
    nodeKey: {
      type: String,
      default: () => {},
    },
    nodeName: {
      type: String,
      default: () => {},
    },
    isExpand: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    filterText(val) {
      this.$refs.moduleTree.filter(val);
    },
  },
  data() {
    return {
      filterText: undefined,
    };
  },

  mounted() {},

  methods: {
    setCurrentKey(val) {
      this.$refs.moduleTree.setCurrentKey(val);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.nodeName].indexOf(value) !== -1;
    },
    onModuleNodeClick(data) {
      this.$emit("onModuleNodeClick", data);
    },
    onModuleNodeExpand(data) {
      this.$emit("onModuleNodeExpand", data);
    },
    onModuleNodeCollapse(data) {
      this.$emit("onModuleNodeCollapse", data);
    },
  },
  computed: {
    ...mapGetters(["getMainContextHeight"]),
  },
};
</script>
<style scoped lang="scss">
::v-deep.box-card {
  .el-card__body {
    padding: 5px 10px 0px;
  }
}
.scrollbar {
  height: calc(100% - 130px);
  ::v-deep .el-scrollbar__wrap {
    overflow: auto !important;
  }
}
::v-deep .el-tree-node__content {
  height: 35px;
  font-size: 14px;
}

::v-deep .el-tree-node__content .is-leaf {
  display: none;
}

.module-node-item {
  width: 100%;
  height: 35px;
  line-height: 35px;
}

.module-node-menu {
  float: right;
  width: 84px;
  text-align: right;
  padding-right: 9px;
}

.module-node-menu.group {
  width: 84px;
  text-align: right;
  padding-right: 9px;
}

.module-node-text {
  width: 100%;
  margin-right: 56px;
}

.module-node-text.group {
  margin-right: 84px;
}

.el-tree-node__content .is-leaf + .module-node-item .module-node-text {
  padding-left: 24px;
}

.module-node-text .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
